<template>
  <div class="tab-title-page p_list">
    <el-tabs v-model="activeName" class="flex-1 nav_tabs" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabList" :key="item.id" :name="item.id + ''">
        <p class="text-center" style="line-height:20px;" slot="label">
          <span>{{ item.name }}</span><br><span>({{ item.title }})</span></p>
      </el-tab-pane>
    </el-tabs>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="common_form_search">
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="商品名称">
            <el-input v-model="searchForm.title" placeholder="请输入商品名称" clearable />
          </el-form-item>
          <el-form-item label="供应商">
            <el-input v-model="searchForm.shopname" placeholder="请输入供应商" clearable />
          </el-form-item>
          <el-form-item label="商品品类">
            <el-select v-model="searchForm.category_id" placeholder="请选择商品品类" clearable>
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="全部" clearable>
              <el-option label="上架推广" value="1" />
              <el-option label="下架推广" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search()">查询</el-button>
            <el-button size="small" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider />
      <div style="padding:0 30px">
        <div class="flex align-center table-top-btns">
          <h5 class="flex align-center">
            <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
          </h5>
          <el-button v-if="$hasMethod('#add')" size="small" class="add-btn" @click="openAdd()" icon="el-icon-plus">添加商品</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" label="排序" width="80">
            <template slot-scope="scope">
              <span v-if="!$hasMethod('#sort')">{{ scope.row.sort }}</span>
              <el-input v-else oninput="value=value.replace(/[^\d]/g,'')" v-model="scope.row.sort" maxLength="9" @change="changeSort(scope.row.id, scope.row.sort)" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品信息" width="500">
            <template slot-scope="scope">
              <div class="flex">
                <el-image style="width: 60px; height: 60px" :src="scope.row.imgurl ? $globalObj.imgBaseUrl + scope.row.imgurl : ''">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <div class="flex-1 text-left" style="padding-left:15px;">
                  <p class="color-999">{{ scope.row.goods_id }}</p>
                  <p class="blue-font">{{ scope.row.title }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="category_name" label="品类" align="center" />
          <el-table-column prop="shelves_time" label="上架时间" align="center" width="100" />
          <el-table-column prop="shopname" label="供应商" align="center" />
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button v-if="$hasMethod('#enable')" @click="changeStatus(scope.row.id, scope.row.status)" type="warning" size="mini">{{ scope.row.status == 1 ? '下架推广' : '上架推广' }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <custom-page ref="customPage" :total="total" @getList="getList"></custom-page>
      </div>
    </div>
    <goods-dialog ref="goodsDialog" :cate-id="activeName" @getList="getList" />
  </div>
</template>

<script>
import { h5PromotionGoodsList, h5PromotionCate, addOrEditH5PromotionGoods, getSecondCategory } from '@/api/recommend'
import customPage from '@/components/customPage'
import goodsDialog from './goods'
export default {
  components: { customPage, goodsDialog },
  data() {
    return {
      searchForm: {
        title: '',
        shopname: '',
        category_id: '',
        status: ''
      },
      activeName: '',
      total: 0,
      tableData: [],
      tabList: [],
      categoryList: []
    }
  },
  methods: {
    // 上架/下架推广
    changeStatus(id, status) {
      let tip = ''
      let title = ''
      if (status === 1) {
        tip = '您确定要下架推广吗？'
        title = '下架推广'
      } else {
        tip = '您确定要上架推广吗？'
        title = '上架推广'
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        addOrEditH5PromotionGoods({
          id,
          promotion_cate_id: this.activeName,
          status: status === 2 ? 1 : 2
        }).then(res => {
          this.getList(true)
        })
      }).catch(() => { })
    },
    // 更改排序
    changeSort(id, val) {
      addOrEditH5PromotionGoods({
        id: id,
        promotion_cate_id: this.activeName,
        sort: val
      }).then(res => {
        this.getList(true)
      })
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      h5PromotionGoodsList({
        page,
        pageSize,
        promotion_cate_id: this.activeName,
        ...this.searchForm
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total
      })
    },
    getClassify() {
      h5PromotionCate().then(res => {
        this.tabList = res || []
        this.activeName = this.tabList[0] ? this.tabList[0].id + '' : ''
        this.getList()
      })
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.searchForm = {
        title: '',
        shopname: '',
        category_id: '',
        status: ''
      }
      this.$refs.customPage.page = 1
      this.getList()
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.$refs.customPage.page = 1
      this.reset()
    },
    getSelectList() {
      getSecondCategory().then(res => {
        this.categoryList = res || []
      })
    },
    openAdd() {
      this.$refs.goodsDialog.dialogVisible = true
    }
  },
  mounted() {
    this.getClassify()
    this.getSelectList()
  }
}
</script>

<style lang="scss" scoped>
.common_form_search {
  padding: 15px 30px 0;
}

.child_page {
  padding-bottom: 15px;
}

.nav_tabs {
  padding-top: 15px;
}
</style>
